<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品页面</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body class="index-shop">
<div class="main">
    <div class="right">
        <div><a href="#"><img src="img/index-shop/right-personal.png"></a></div>
        <div><a href="#"><img src="img/index-shop/right-shopping.png"></a></div>
        <div><a href="#"><img src="img/index-shop/right-number.png"></a></div>
        <div><a href="#"><img src="img/index-shop/right-wallet.png"></a></div>
        <div><a href="#"><img src="img/index-shop/right-history.png"></a></div>
        <div><a href="#"><img src="img/index-shop/right-collect.png"></a></div>
        <div><a href="#"><img src="img/index-shop/right-voucher.png"></a></div>
        <div><a href="#"><img src="img/index-shop/service.png"></a></div>
        <div><a href="#"><img src="img/index-shop/QR-code.png"></a></div>
        <div><a href="#"><img src="img/index-shop/right-returnTop.png"></a></div>
    </div>
    <div class="wrap">
        <div class="top clearfix">
            <div class="top-left"><a href="#">亲，请登录</a> | <a href="#">免费注册</a></div>
            <div class="top-right">
                <span class="mall"><a href="index.html">商城首页</a></span>
                <span class="personal"><img src="img/index-shop/personal.png"><a href="information.html">个人中心</a></span>
                <span class="shopping"><img src="img/index-shop/shopping.png"><a href="cart.html">购物车0</a></span>
                <span class="collect"><img src="img/index-shop/collect.png"><a href="collection.html">收藏夹</a></span>
            </div>
        </div>
        <div class="logo"><img src="img/index-shop/logo1.png"></div>
        <div class="search clearfix">
            <input type="text" placeholder="搜索" class="text">
            <a href="search.html"> <input class="btn" value="搜索" type="button"></a>
        </div>
        <div class="nav clearfix">
            <div class="all"><a href="#">全部分类</a></div>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="index.html">闪购</a></li>
                <li><a href="index.html">限时购</a></li>
                <li><a href="index.html">团购</a></li>
                <li class="li5"><a href="index.html">大包装</a></li>
            </ul>
            <div class="weal clearfix">
                <img src="img/index-shop/myWeal1.png">
                <div class="myWeal"><a href="#">我的福利 >></a></div>
            </div>
        </div>

    </div>
    <div class="content">
        <div class="shoppe">
            <div class="list clearfix">
                <ul>
                    <li><a href="#">首页&nbsp;&nbsp;/</a></li>
                    <li><a href="#">分类&nbsp;&nbsp;/</a></li>
                    <li class="li3"><a href="#">内容</a></li>
                </ul>
            </div>
            <div class="trolley clearfix">
                <div class="image">
                    <div class="glass">
                        <div class="left11" id="left11">
                            <img id="leftimg" src="img/index-shop/bigImg1.png">
                            <div class="mirror" id="mirror"></div>
                        </div>
                        <div class="right11" id="right11">
                            <img id="rightimg" src="img/index-shop/bigImg1.png">
                        </div>
                    </div>
                    <div class="smallImg clearfix" id="smallImg">
                        <ul>
                            <li id="li1"><img src="img/index-shop/smallImg1.png"></li>
                            <li id="li2"><img src="img/index-shop/smallImg2.png"></li>
                            <li id="li3"><img src="img/index-shop/smallImg3.png"></li>
                        </ul>
                    </div>
                </div>
                <div class="chose">
                    <div class="title"><p>良品铺子 手剥松子218g 坚果炒货 巴西松子</p></div>
                    <div class="price">
                        <div class="price-list clearfix">
                            <div class="prefer"><p>店铺优惠&nbsp;&nbsp;&nbsp;<span>购物满2件打8折，满3件7折</span></p></div>
                            <div class="coupon1" id="coupon1"><a href="#"><span>点击领券</span><img src="img/index-shop/coupon1.png"></a></div>
                            <div class="coupon2" id="coupon2"><a href="#"><span>点击领券</span><img src="img/index-shop/coupon2.png"></a></div>
                        </div>
                        <div class="change-price" id="changePrice">
                            <div class="less"><p>促销价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>￥56.90</span></p></div>
                            <div class="value"><p>原价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>￥98.00</span></p></div>
                        </div>
                        <div class="discount" id="discount">
                            <span>优惠券</span>
                            <img src="img/index-shop/discount-1.png">
                            <img src="img/index-shop/discount-2.png">
                            <img src="img/index-shop/discount-3.png">
                        </div>
                    </div>
                    <div class="delivery">
                        <span>配送至</span>
                        <select>
                            <option>浙江省</option>
                            <option>湖北省</option>
                        </select>
                        <select>
                            <option>温州市</option>
                            <option>武汉市</option>
                        </select>
                        <select>
                            <option>瑞安区</option>
                            <option>洪山区</option>
                        </select>
                        <span>快递10元</span>
                    </div>
                    <div class="number clearfix">
                        <ul>
                            <li><p>月销量<span>1050</span></p></li>
                            <li><p>累计销量<span>6015</span></p></li>
                            <li class="num3"><p>累计评价<span>640</span></p></li>
                        </ul>
                    </div>
                    <div class="taste clearfix" id="taste">
                        <ul>
                            <li class="taste-li1">口味</li>
                            <li><div class="check" id="check"></div>原味</li>
                            <li><div class="check" id="check"></div>奶油</li>
                            <li><div class="check" id="check"></div>碳烤</li>
                            <li><div class="check" id="check"></div>咸香</li>
                        </ul>
                    </div>
                    <div class="pack clearfix" id="pack">
                        <ul>
                            <li class="pack-li1">包装</li>
                            <li><div class="check" id="check"></div>手袋单人份</li>
                            <li><div class="check" id="check"></div>礼盒双人份</li>
                            <li><div class="check" id="check"></div>全家福利包</li>
                        </ul>
                    </div>
                    <div class="quantity">
                        <span>数量</span>
                        <input type="button" value="-" class="reduce" id="reduce">
                        <input type="text" style="width:36px" id="text" value="0">
                        <input type="button" value="+" class="increase" id="increase">
                        <span>库存1000件</span>
                    </div>
                    <div class="chose-bottom">
                        <a href="cart.html"><input type="button" value="立即购买" class="btn1"></a>
                        <a href="cart.html"><input type="button" value="加入购物车" class="btn2"></a>
                    </div>
                </div>
            </div>
            <div class="combo">
                <span>优惠套装</span>
                <div class="combo-box clearfix">
                    <a href="index-shop.html">
                        <li class="salami"><img src="img/index-shop/salami.png"><p><a href="#">萨拉米1+1小鸡腿</a></p><span>￥29.90</span><span class="cost">￥199.00</span></li>
                        <li><div class="add">+</div></li>
                        <li class="zek"><img src="img/index-shop/zek.png"><p><a href="#">ZEK原味海苔</a></p><span>￥8.90</span><span class="cost">￥299.00</span></li>
                        <li><div class="to">=</div></li>
                        <li><div class="buy"><p class="buy-1">套餐价:￥35.00</p><p>共省:￥463.00</p><div class="btn-buy"><a href="cart.html">立即购买</a></div></div></li>
                    </a>
                </div>
            </div>
            <div class="details clearfix">
                <div class="looks">
                    <div class="look-text">看了又看</div>
                    <div class="look-top"></div>
                    <ul>
                        <li><img src="img/index-shop/looks.png"><p><a href="index-shop.html">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></p><span>￥35.90</span></li>
                        <li><img src="img/index-shop/looks.png"><p><a href="index-shop.html">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></p><span>￥35.90</span></li>
                        <li><img src="img/index-shop/looks.png"><p><a href="index-shop.html">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></p><span>￥35.90</span></li>
                        <li><img src="img/index-shop/looks.png"><p><a href="index-shop.html">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></p><span>￥35.90</span></li>
                        <li class="img5"><img src="img/index-shop/looks.png"><p><a href="index-shop.html">【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味</a></p><span>￥35.90</span></li>
                    </ul>
                </div>
                <div class="details-right">
                    <div class="right-top clearfix" id="right-top">
                        <ul>
                            <li id="right1">宝贝详情</li>
                            <li id="right2">全部评价</li>
                            <li id="right3">猜你喜欢</li>
                        </ul>
                    </div>
                    <div class="details-content1 clearfix" id="details-content1">
                        <div class="con">
                            <div class="con-box1">
                                <ul>
                                    <li>产品类型:烘炒型</li>
                                    <li>配料表:进口松子、食用盐</li>
                                    <li>产品标准号:GB/T 22165</li>
                                    <li>使用方法:开袋去壳即食</li>
                                </ul>
                            </div>
                            <div class="con-box2">
                                <ul>
                                    <li>原料产地:巴基斯坦</li>
                                    <li>产品规格:210g</li>
                                    <li>生产许可证编号:QS4201 1801 4226</li>
                                </ul>
                            </div>
                            <div class="con-box3">
                                <ul>
                                    <li>产地:湖北省武汉市</li>
                                    <li>保质期:180天</li>
                                    <li>储存方法:请放置于常温、阴凉、通风、干燥..</li>
                                </ul>
                            </div>
                        </div>
                        <div class="shangpin">商品详情</div>
                        <div class="shangpin-img">
                            <img src="img/index-shop/shangpin-1.png">
                            <img src="img/index-shop/shangpin-2.png">
                            <img src="img/index-shop/shangpin-3.png">
                        </div>
                    </div>
                    <div class="details-content2" id="details-content2">
                        <div class="good-reputation">
                            <div class="reputa-1 clearfix">
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                            <div class="reputa-2 clearfix">
                                <ul>
                                    <li class="li1">好评度</li>
                                    <li>“价格便宜(1119)”</li>
                                    <li>“特价买的”</li>
                                    <li>“皮很薄”</li>
                                </ul>
                            </div>
                        </div>
                        <div class="all-reputa">
                            <ul class="all-reputa-ul clearfix">
                                <li><a href="#">全部评价(32)</a></li>
                                <li><a href="#">好评(32)</a></li>
                                <li><a href="#">中评(32)</a></li>
                                <li><a href="#">差评(32)</a></li>
                            </ul>
                            <div class="all-reputa-content">
                                <div class="a-r-content1 clearfix">
                                    <img src="img/index-shop/all-reputa-content-image.png">
                                    <div class="content-txt">
                                        <div class="txt-top"><div class="triangle1"></div><div class="triangle2"></div>B****1(匿名) 评论于2015年11月02日 17:46</div>
                                        <div class="txt-bottom"><p>没有色差，很暖和，么么哒</p><p>颜色分类:蓝调灰 尺码:2XL</p></div>
                                    </div>
                                </div>
                                <div class="a-r-content1 clearfix">
                                    <img src="img/index-shop/all-reputa-content-image.png">
                                    <div class="content-txt">
                                        <div class="txt-top"><div class="triangle1"></div><div class="triangle2"></div>B****1(匿名) 评论于2015年11月02日 17:46</div>
                                        <div class="txt-bottom"><p>没有色差，很暖和，么么哒</p><p>颜色分类:蓝调灰 尺码:2XL</p></div>
                                    </div>
                                </div>
                                <div class="a-r-content1 clearfix">
                                    <img src="img/index-shop/all-reputa-content-image.png">
                                    <div class="content-txt">
                                        <div class="txt-top"><div class="triangle1"></div><div class="triangle2"></div>B****1(匿名) 评论于2015年11月02日 17:46</div>
                                        <div class="txt-bottom"><p>没有色差，很暖和，么么哒</p><p>颜色分类:蓝调灰 尺码:2XL</p></div>
                                    </div>
                                </div>
                                <div class="a-r-content1 clearfix">
                                    <img src="img/index-shop/all-reputa-content-image.png">
                                    <div class="content-txt">
                                        <div class="txt-top"><div class="triangle1"></div><div class="triangle2"></div>B****1(匿名) 评论于2015年11月02日 17:46</div>
                                        <div class="txt-bottom"><p>没有色差，很暖和，么么哒</p><p>颜色分类:蓝调灰 尺码:2XL</p></div>
                                    </div>
                                </div>
                                <div class="a-r-content1 clearfix">
                                    <img src="img/index-shop/all-reputa-content-image.png">
                                    <div class="content-txt">
                                        <div class="txt-top"><div class="triangle1"></div><div class="triangle2"></div>B****1(匿名) 评论于2015年11月02日 17:46</div>
                                        <div class="txt-bottom"><p>没有色差，很暖和，么么哒</p><p>颜色分类:蓝调灰 尺码:2XL</p></div>
                                    </div>
                                </div>
                                <div class="a-r-content1 clearfix">
                                    <img src="img/index-shop/all-reputa-content-image.png">
                                    <div class="content-txt">
                                        <div class="txt-top"><div class="triangle1"></div><div class="triangle2"></div>B****1(匿名) 评论于2015年11月02日 17:46</div>
                                        <div class="txt-bottom"><p>没有色差，很暖和，么么哒</p><p>颜色分类:蓝调灰 尺码:2XL</p></div>
                                    </div>
                                </div>
                                <div class="a-r-content1 clearfix">
                                    <img src="img/index-shop/all-reputa-content-image.png">
                                    <div class="content-txt">
                                        <div class="txt-top"><div class="triangle1"></div><div class="triangle2"></div>B****1(匿名) 评论于2015年11月02日 17:46</div>
                                        <div class="txt-bottom"><p>没有色差，很暖和，么么哒</p><p>颜色分类:蓝调灰 尺码:2XL</p></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="page-btn">
                            <ul>
                                <li><a href="#"><<</a></li>
                                <li class="page-btn1"><a href="#">1</a></li>
                                <li class="page-btn2"><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">>></a></li>
                            </ul>
                        </div>
                        <div class="equity">购买前请查看该商品的售后保障，明确您的售后保障权益</div>
                    </div>
                    <div class="details-content3 clearfix" id="details-content3">
                        <ul>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                            <li><img src="img/index-shop/content2-image.png"><p><a href="index-shop.html">【良品铺子_开口松子】零食坚果特产炒货 东北红松子奶油味</a></p><span>￥298.00</span></li>
                        </ul>
                        <div class="page-btn">
                            <ul>
                                <li><a href="#"><<</a></li>
                                <li class="page-btn1"><a href="#">1</a></li>
                                <li class="page-btn2"><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">>></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom clearfix">
                <ul>
                    <li><a href="index.html">WESHOP</a></li>
                    <li><a href="index.html">商城首页</a></li>
                    <li><a href="#">支付宝</a></li>
                    <li class="li4"><a href="#">物流</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer clearfix">
        <ul>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">网站地图</a></li>
        </ul>
    </div>
</div>
<script src="js/index-shop.js"></script>
</body>
</html>